import React, { useEffect, useMemo } from 'react';
import { Input, Row, Col } from 'antd';
import FormItem from '../../../../components/FormItem';
import { connect } from 'react-redux';
import { compare } from '../../../../utils/compare';
import DeptSelect from '../../../../components/DeptSelect';

const TemplateBase = (props) => {
  // const [hasRight, setHasRight] = useState([]); // 可见部门
  // useEffect(() => {
  //   getDeptAll();
  // }, []);
  // 设置form值
  useEffect(() => {
    if (props.actionType !== 'add') {
      props.form.setFieldsValue({
        name: props.value.name,
        remark: props.value.remark,
        dept_ids: renderDept(props.value.dept_arr),
      });
    }
  }, [props.value]);
  // 重置数据
  function renderDept(datas) {
    let deptValue = [];
    datas &&
      datas.ids &&
      datas.ids.forEach((item, index) => {
        let data = {
          label: datas.name[index],
          value: datas.ids[index],
        };
        deptValue.push(data);
      });
    // console.log('重置数据', deptValue)
    return deptValue;
  }
  // 获取可见部门列表
  // function getDeptAll() {
  //   services.dept.hasRight().then((res) => {
  //     if (res.code === 0) {
  //       if (res.data.length && !res.data[0].dept_id) {
  //         res.data.dept_id = -1;
  //       }
  //       setHasRight(res.data);
  //     }
  //   });
  // }
  const { name, remark, dept_arr } = props.value || {};
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  function nameChange(e) {
    props.form.setFieldsValue({
      name: e.target.value,
    });
    props.changeForm && props.changeForm();
  }
  function remarkChange(e) {
    props.form.setFieldsValue({
      remark: e.target.value,
    });
    props.changeForm && props.changeForm();
  }

  const DeptSelectNode = useMemo(
    () =>
      DeptSelect({
        treeCheckable: true, // 是否多选
        treeCheckStrictly: true, // 多选时是否取消父子关联
        deptTree: props.depts, // 全部部门数据
        deptArr: dept_arr, // 当前部门数据
        hasRight: true, // 是否需要权限展示
        // nodeDisabled: (item) => !item.dept_id, // 节点禁选
        disabled: props.actionType === 'detail' && !props.isDisable,
        layout: layout,
        form: props.form,
        onChange: () => props.changeForm && props.changeForm(),
      }),
    [dept_arr, props.depts, props.isDisable]
  );

  const formItems = [
    {
      label: {
        label: '模板名称',
        ...layout,
      },
      name: 'name',
      options: {
        initialValue: name,
        rules: [
          { required: true, message: '请输入模板名称' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
          { max: 128, message: '最长128个字符' },
        ],
      },
      component: (
        <Input
          placeholder='请填写模板名称'
          disabled={props.actionType === 'detail' && !props.isDisable}
          onChange={nameChange}
          style={compare(props, 'name')}
        />
      ),
    },
    DeptSelectNode,
    {
      label: {
        label: '描述',
        ...layout,
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [{ max: 256, message: '最长256个字符' }],
      },
      component: (
        <Input
          placeholder='请输入简短描述，限256字'
          onChange={remarkChange}
          disabled={props.actionType === 'detail' && !props.isDisable}
          style={compare(props, 'remark')}
        />
      ),
    },
  ].filter(Boolean);

  return (
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
};
function mapStateToProps(state) {
  return {
    depts: state.global.depts,
  };
}
export default connect(mapStateToProps)(TemplateBase);
